<template>
	<view class="root">

		<scroll-view class="container">
			<view class="top-bg">

				<view class="children-view">
					<image style="width: 160rpx;height: 160rpx;margin-left: 20rpx;" :src="gender===1?'../../static/children-detail-head-male.png':'../../static/children-detail-head-female.png'"></image>
					<view class="children-info-view">
						<view class="children-info-view-row">
							<text class="info-item1">姓名:{{name}}</text>
							<text class="info-item2">月龄:{{month}}月</text>
							<text class="info-item3">性别:{{gender===1?'男':'女'}}</text>
						</view>
						<view class="children-info-view-row">
							<text class="info-item1">身高:{{height}}cm</text>
							<text class="info-item2">体重:{{weight}}kg</text>
							<text @click="delClick" class="info-item3" style="text-decoration: underline;">编辑</text>
							<!-- 							<view @click="delClick" class="info-item3">
								<image  src="../../static/children_detail_delete.png"
								style="width: 24rpx;height: 27rpx;" ></image>
							</view> -->
						</view>
						<view class="children-info-view-row">
							<text v-if="parentPhone">家长号码:</text>
							<text @click="callClick" style="text-decoration: underline;" v-if="parentPhone">{{parentPhone}}</text>
						</view>
					</view>
				</view>
				<image class="top-user-bg" src="../../static/icon_user_top_bg.png"></image>
			</view>

			<uni-swipe-action class="swipe-item">
				<uni-swipe-action-item v-for="(item,index) in assessList" :options="options" @click="onDelete($event,item,index)"
				 :key="item.evaluateRecordId">
					<view style="background-color: #F7F7F7;width: 100%;">
						<view class="assess-item" :class="'assess-item-bg'+index%4" @click="onClick(item.evaluateRecordId,index)">
							<image :src="getAssessLevelCover(item)" style="width: 190rpx;height: 190rpx;"></image>
							<view style="display: flex;flex-direction: column;margin-left: 20rpx;margin-right: 20rpx;">
								<text class="assess-item-title">心理行为测评报告</text>
								<text class="assess-item-time">{{item.evaluateTime}}</text>
								<!-- <text class="assess-item-time">{{item.parentGranted ? '已发布' : '未发布'}}</text> -->
							</view>
							<view v-if="isCompare">
								<image v-if="item.checked" class="item-check-yes" @click.stop="checkChange($event, index, item)" src="../../static/assess-select-yes.png">
								</image>
								<image v-else class="item-check-no" @click.stop="checkChange($event,index, item)" src="../../static/assess-select-no.png">
								</image>
							</view>
							<view v-if="item.parentGranted && appId ==='wx8033fe9de99c902d'" class="assess-item-granted">
								<image class="assess-item-granted-icon" src="../../static/children-detail-assess-granted.png"></image>
								<text class="assess-item-granted-hint">已推送</text>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>

			<view class="safe-area-view"></view>

			<view v-if="assessList.length===0" class="children-empty">
				<image class="children-empty-img" src="../../static/children-list-empty.png"></image>
			</view>
		</scroll-view>

		<view class="assess-fixed">
			<view class="assess-fixed-view">
				<view v-if="toolShow" @click="onToolNewClick()" class="assess-new">
					新建
				</view>
				<image v-if="theme === 'knsh'" @click="onToolClick()" class="assess-add" src="../../static/assess-add-knsh.png" />
				<image v-if="theme === 'msdd'" @click="onToolClick()" class="assess-add" src="../../static/assess-add-msdd.png" />
				<image v-if="theme === 'tuo51'" @click="onToolClick()" class="assess-add" src="../../static/assess-add.png"/>
				<image v-if="theme === 'czcp'" @click="onToolClick()" class="assess-add" src="../../static/assess-add-czcp.png"/>
			
				<view v-if="toolShow" @click="onToolCompareClick()" class="assess-compare">
					{{isCompare? '取消':'对比'}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import assessNewBtn from '@/components/assess-new-btn.vue'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import utils from '../../utils/utils.js'

	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem,
			uniFab,
			assessNewBtn,
		},
		data() {
			return {
				id: '',
				name: '',
				month: '',
				gender: '',
				height: '',
				weight: '',
				parentPhone: '',
				guardianRelation: '',
				options: [{
					text: '删除'
				}],
				assessList: [],

				isCompare: false,

				content: [{
						text: '测评',
						active: false
					},
					{
						text: '对比',
						active: false
					},
				],

				toolShow: false,
				theme: getApp().globalData.theme,
				appId: getApp().globalData.appid,
			}
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id;
			this.name = options.name;
			this.month = options.month;
			this.gender = parseInt(options.gender);
			this.height = options.height;
			this.weight = options.weight;
			console.log(this.gender)
		},

		onShow() {
			this.getChildrenDetail();
			this.getAssessList();
			// this.$refs.fab.close()
		},

		methods: {
			getAssessLevelCover(item) {
				if (item.rating === 'A++') {
					return '../../static/assess-level-1.png';
				} else if (item.rating === 'A+') {
					return '../../static/assess-level-2.png';
				} else if (item.rating === 'A') {
					return '../../static/assess-level-3.png';
				} else if (item.rating === 'B') {
					return '../../static/assess-level-4.png';
				} else if (item.rating === 'B-') {
					return '../../static/assess-level-5.png';
				}
				return '';
			},

			checkChange(event, index, item) {
				if (item.checked) {
					item.checked = false;
				} else {
					item.checked = true;
				}
				this.assessList.splice(index, 1, item);
				let checkCount = 0;
				let checkList = [];
				for (var index in this.assessList) {
					if (this.assessList[index].checked) {
						checkCount += 1;
						checkList.push(this.assessList[index].evaluateRecordId)
					}
				}
				if (checkCount >= 2) {
					uni.navigateTo({
						url: '/pages-assess/assess-compare/assess-compare?evaluateRecordId=' + checkList[0] + '&comparingWithId=' +
							checkList[1]
					})
					for (var index in this.assessList) {
						this.assessList[index].checked = false;
					}
				}
			},

			back() {
				uni.navigateBack({

				})
			},
			fabClick() {
				console.log('fabClick')
			},

			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				if (e.index === 0) {
					this.doAssess();
					this.$refs.fab.close()
				} else {
					this.isCompare = !this.isCompare;
				}
			},

			onToolNewClick() {
				var phone = '';
				if (!utils.isEmpty(this.parentPhone)){
					phone = this.parentPhone;
				}
				this.toolShow = false;
				uni.navigateTo({
					url: '/pages-assess/assess/assess-ready/assess-ready?assess=1&childrenId=' + this.id
					+ '&month=' + this.month
					+ '&phone=' + phone
					+ '&height=' + this.height
					+ '&weight=' + this.weight
					+ '&birthday=' + this.birthday,
				})
			},

			onToolCompareClick() {
				this.isCompare = !this.isCompare;
			},

			onToolClick() {
				var vipLevel = getApp().globalData.user.org.vipLevel;
				if (utils.isEmpty(vipLevel)) {
					vipLevel = 0;
				}
				console.log(vipLevel);
				if (vipLevel != 0) {
					this.toolShow = !this.toolShow
					this.isCompare = false;
				} else {
					this.onToolNewClick();
				}
			},

			onClick(recordId, index) {
				if (this.isCompare) {
					this.checkChange(null, index, this.assessList[index]);
					return;
				}
				uni.navigateTo({
					url: '/pages-assess/assess/assess-result/assess-result?evaluateRecordId=' + recordId
				})
			},

			onDelete(e, item, index) {
				this.deleteReport(item, index);
			},

			getAssessList() {
				this.$http.request({
					method: 'POST',
					url: '/eapi/operator/children_reports',
					params: {
						childrenId: this.id,
						pageNum: 0,
						pageSize: 999,
					}
				}).then(res => {
					console.log(res);
					this.assessList = res.data.content;
					for (var index in this.assessList) {
						this.assessList[index].checked = false;
					}
				}).catch(err => {

				})
			},

			deleteReport(item, index) {
				uni.showLoading({})
				this.$http.request({
					method: 'POST',
					url: '/eapi/operator/delete_report',
					params: {
						evaluateRecordId: item.evaluateRecordId,
					}
				}).then(res => {
					uni.hideLoading();
					console.log(res);
					if (res.code = '000000') {
						this.assessList.splice(index, 1);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log(err);
					uni.hideLoading();
				})
			},

			delClick() {
				console.log('@click="delClick"');
				console.log(this.parentPhone);
				var phone = this.parentPhone;
				if (utils.isEmpty(phone)){
					phone = '';
				}
				uni.navigateTo({
					url: '/pages-assess/children-edit/children-edit?name=' + this.name +
						'&gender=' + this.gender +
						'&id=' + this.id +
						'&height=' + this.height +
						'&weight=' + this.weight +
						'&parentPhone=' + phone +
						'&guardianRelation=' + this.guardianRelation,
					events: {
						someEvent: function(data) {
								console.log(data)
							}
					},
				})
			},

			getChildrenDetail() {
				this.$http.request({
					method: 'POST',
					url: '/eapi/operator/children_detail',
					params: {
						childrenId: this.id
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.code === '000000') {
						let date = utils.formatISODate(res.data.birthday);
						let birthday = utils.formatDate(date,'yyyy-MM-dd');
						this.name = res.data.name;
						this.month = res.data.month;
						this.gender = res.data.gender;
						this.height = res.data.height;
						this.weight = res.data.weight;
						this.birthday = birthday;
						this.month = res.data.month;
						this.parentPhone = res.data.extendInfo.guardianPhone;
						this.guardianRelation = res.data.extendInfo.guardianRelation;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none'
					})
				})
			},
			
			///拨打电话
			callClick() {
				uni.makePhoneCall({
					phoneNumber: this.parentPhone
				})
			}


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.root {
		background-color: #F7F7F7;
		position: relative;
	}

	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 136rpx;

	}

	.top-bg {
		margin-top: 20rpx;
		height: 200rpx;
		// background: linear-gradient(180deg, rgba(250, 204, 48, 1) 0%, rgba(252, 222, 122, 1) 100%);
		opacity: 1;

		display: flex;
		flex-direction: row;
		align-items: center;

		position: relative;
		
		@include power-bg();
	}

	.top-user-bg {
		position: absolute;
		bottom: 0rpx;
		height: 200rpx;
		width: 100%;
		z-index: 1;
	}

	.children-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		color: #FFFFFF;
		width: 100%;
		z-index: 2;
	}

	.children-info-view {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		margin-left: 24rpx;
	}

	.children-info-view-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10rpx;
		margin-right: 20rpx;
	}

	.info-item1 {
		width: 40%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.info-item2 {
		width: 40%;
	}

	.info-item3 {
		width: 20%;
		text-align: right;
	}

	.swipe-item {
		width: 100%;
		margin-top: 10rpx;
	}

	.assess-item {
		
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-bottom: 10rpx;
		margin-top: 10rpx;

		height: 120px;

		opacity: 1;
		border-radius: 4px;
		padding-left: 24rpx;
		padding-right: 24rpx;

		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.assess-item-bg0 {
		background: linear-gradient(136deg, rgba(250, 204, 48, 1) 0%, rgba(247, 224, 144, 1) 100%);
		@include assess-item-bg0();
	}

	.assess-item-bg1 {
		background: linear-gradient(136deg, rgba(250, 136, 48, 1) 0%, rgba(254, 209, 134, 1) 100%);
		@include assess-item-bg1();
	}

	.assess-item-bg2 {
		background: linear-gradient(129deg, rgba(250, 139, 112, 1) 0%, rgba(249, 167, 100, 1) 100%);
		@include assess-item-bg2();
	}

	.assess-item-bg3 {
		background: linear-gradient(46deg, rgba(250, 169, 48, 1) 0%, rgba(254, 167, 144, 1) 100%);
		@include assess-item-bg3();
	}

	.assess-item-title {
		font-size: 40rpx;
		color: rgba(255, 255, 255, 1);
		opacity: 1;
		font-weight: bold;
	}

	.assess-item-time {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 1);
		opacity: 0.81;
	}
	
	.assess-item-granted{
		position: absolute;
		top: 0;
		right: 20rpx;
		width: 132rpx;
		height: 40rpx;
		background: #FB9A46;
		opacity: 1;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.assess-item-granted-icon{
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
		margin-top: 8rpx;
	}
	
	.assess-item-granted-hint{
		color: #FFFFFF;
		font-size: 20rpx;
		margin-top: 4rpx;
	}

	.children-empty {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
	}

	.children-empty-img {
		width: 644rpx;
		height: 400rpx;
		margin-bottom: 10rpx;
	}

	.item-check-yes {
		width: 44rpx;
		height: 44rpx;
	}

	.item-check-no {
		width: 44rpx;
		height: 44rpx;
	}
	.assess-fixed {
		background: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		width: 100%;
		bottom: 0rpx;
	}
	.assess-fixed-view {
		width: 100%;
		height: 136rpx;
		bottom: 0rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.assess-new {
		width: 106rpx;
		height: 106rpx;
		background: linear-gradient(0deg, rgba(250, 204, 48, 1) 0%, rgba(247, 224, 144, 1) 100%);
		border-radius: 50%;
		opacity: 1;
		color: #FFFFFF;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		@include assess-add-new();
	}

	.assess-add {
		width: 268rpx;
		height: 104rpx;
		align-self: flex-end;
	}

	.assess-compare {
		width: 106rpx;
		height: 106rpx;
		background: linear-gradient(360deg, rgba(247, 171, 58, 1) 0%, rgba(255, 227, 134, 1) 100%);
		border-radius: 50%;
		opacity: 1;
		color: #FFFFFF;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		@include assess-compare();
	}
</style>
